<div>
    <div class="ui secondary pointing menu">
        <a class="active item">
            server
        </a>
    </div>
    <table class="ui single line table">
        <thead>
        <tr>
            <th>id</th>
            <th>地址</th>
            <th>端口</th>
            <th>连接</th>
            <th>超时</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="serverData in servers">
            <td>
                {{serverData.id}}
            </td>
            <td>
                {{serverData.host}}
            </td>
            <td>
                {{serverData.port}}
            </td>
            <td>
                {{serverData.connection}}
            </td>
            <td>
                {{serverData.timeout}}
            </td>
            <td>
                <button class="ui tiny button green" ng-click="server.info(serverData.id)">
                    <i class="info icon"></i> 信息
                </button>
                <a class="ui tiny button green" href="#/chart?serverId={{serverData.id}}">
                    <i class="line chart icon"></i> 图表
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<br/><br/>

<div>
    <div class="ui secondary pointing menu">
        <a class="active item">
            client
        </a>
        <a class="item right" ng-click="client.registry.showDialog()">
            <i class="add icon"></i> 注册
        </a>
    </div>
    <table class="ui celled single line table" ng-repeat="clientData in clients">
        <thead>
            <tr>
                <th>id</th>
                <th>地址</th>
                <th>端口</th>
                <th>连接</th>
                <th>超时</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="ui ribbon red label">master</div>
                    {{clientData.id}}
                </td>
                <td>
                    {{clientData.host}}
                </td>
                <td>
                    {{clientData.port}}
                </td>
                <td>
                    {{clientData.connection}}
                </td>
                <td>
                    {{clientData.timeout}}
                </td>
                <td>
                    <a class="ui green label" ng-if="clientData.info.status!='ERROR'">
                        {{clientData.info.status}}
                    </a>

                    <a class="ui red label" ng-if="clientData.info.status=='ERROR'">
                        {{clientData.info.status}}
                    </a>
                </td>
                <td>
                    <button class="ui tiny button green" ng-click="client.info(clientData.id)" ng-if="clientData.info.status!='ERROR'">
                        <i class="info icon"></i> 信息
                    </button>
                    <button class="ui tiny button green" ng-click="client.routing.registry.showDialog(clientData.id)" ng-if="clientData.info.status!='ERROR'">
                        <i class="add icon"></i> 添加路由
                    </button>
                    <button class="ui tiny button green" ng-click="client.showSlotMapping(clientData.id)">
                        <i class="grid layout icon"></i> 槽信息
                    </button>
                    <button class="ui tiny button red" ng-click="client.registry.unregister.showConfirmDialog(clientData.id)">
                        <i class="remove icon"></i> 删除
                    </button>
                </td>
            </tr>
            <tr ng-repeat="routingData in clientData.routings">
                <td>
                    {{routingData.id}}
                </td>
                <td>
                    {{routingData.host}}
                </td>
                <td>
                    {{routingData.port}}
                </td>
                <td>
                    {{routingData.connection}}
                </td>
                <td>
                    {{routingData.timeout}}
                </td>
                <td>
                </td>
                <td>
                    <button class="ui tiny button red" ng-click="client.routing.registry.unregister(clientData.id,routingData.id)">
                        <i class="remove icon"></i> 删除
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<dialog id="serverInfoDialog">
    <dialog-header>
        信息
    </dialog-header>
    <dialog-content ng-bind-html="serverInfoData | html">
    </dialog-content>
    <dialog-action>
        <dialog-action-ok></dialog-action-ok>
    </dialog-action>
</dialog>

<dialog id="clientInfoDialog">
    <dialog-header>
        信息
    </dialog-header>
    <dialog-content ng-bind-html="clientInfoData | html">
    </dialog-content>
    <dialog-action>
        <dialog-action-ok></dialog-action-ok>
    </dialog-action>
</dialog>

<dialog id="clientSlotMappingDialog">
    <dialog-header>
        信息
    </dialog-header>
    <dialog-content>
        <div class="ui icon buttons" style="display:inline;">
            <button class="ui button" ng-repeat="slotData in client.slotMappingData">
                {{slotData}}
            </button>
        </div>
    </dialog-content>
    <dialog-action>
        <dialog-action-ok></dialog-action-ok>
    </dialog-action>
</dialog>

<dialog id="clientUnregisterDialog" class="small">
    <dialog-header>
        选择迁移数据的目标节点
    </dialog-header>
    <dialog-content>
        <div>
            <dropdown class="fluid selection" ng-model="client.registry.unregister.targetClientId">
                <dropdown-item ng-repeat="client in clients" ng-if="client.id!=client.registry.unregister.targetClientId"" data-value="{{client.id}}">{{client.host}}:{{client.port}}</dropdown-item>
            </dropdown>
        </div>
        <br/>
        <div class="right">
            <button class="ui button cancel tiny" ng-click="client.registry.unregister.closeConfirmDialog()">取消</button>
            <button class="ui button ok green tiny" ng-click="client.registry.unregister.unregister()">确认</button>
        </div>
    </dialog-content>
</dialog>

<dialog id="clientRegisterDialog" class="small">
    <dialog-header>
        注册
    </dialog-header>
    <dialog-content>
        <form class="ui form" valid="client.registry.register()" validate>
            <div class="field">
                <label>客户端</label>
                <input type="text" name="client" placeholder="客户端类型" ng-model="client.registry.clientRegister.client" rule="required;"
                       valid-msg="客户端不能为空">
            </div>
            <div class="field">
                <label>地址</label>
                <input type="text" name="host" placeholder="地址" ng-model="client.registry.clientRegister.host" rule="required;"
                       valid-msg="地址不能为空">
            </div>
            <div class="field">
                <label>端口</label>
                <input type="text" name="port" placeholder="端口" ng-model="client.registry.clientRegister.port"
                       rule="required;integer[+];" valid-msg="端口错误">
            </div>
            <div class="field">
                <label>连接数</label>
                <input type="text" name="connection" placeholder="最大连接数" ng-model="client.registry.clientRegister.connection"
                       rule="required;integer[+];" valid-msg="连接数错误">
            </div>
            <div class="field">
                <label>超时</label>
                <input type="text" name="timeout" placeholder="超时" ng-model="client.registry.clientRegister.timeout"
                       rule="required;integer[+];" valid-msg="超时错误">
            </div>
            <div class="field">
                <label>槽开始索引 (0~{{slotCount}})</label>
                <input type="text" name="slotStart" placeholder="槽开始索引" ng-model="client.registry.clientRegister.slotStart"
                       rule="required;integer[+0];" valid-msg="槽开始索引错误">
            </div>
            <div class="field">
                <label>槽结束索引 (0~{{slotCount}})</label>
                <input type="text" name="slotEnd" placeholder="槽结束索引" ng-model="client.registry.clientRegister.slotEnd"
                       rule="required;integer[+];" valid-msg="槽结束索引错误">
            </div>
            <div class="field right">
                <div class="ui button cancel tiny" ng-click="client.registry.closeDialog()">取消</div>
                <button class="ui button ok green tiny" type="submit">注册</button>
            </div>
        </form>
    </dialog-content>
</dialog>

<dialog id="clientRoutingRegisterDialog" class="small">
    <dialog-header>
        注册
    </dialog-header>
    <dialog-content>
        <form class="ui form" valid="client.routing.registry.register()" validate>
            <div class="field">
                <label>客户端</label>
                <input type="text" name="client" placeholder="客户端类型" ng-model="client.routing.registry.routingRegister.client" rule="required;"
                       valid-msg="客户端不能为空">
            </div>
            <div class="field">
                <label>地址</label>
                <input type="text" name="host" placeholder="地址" ng-model="client.routing.registry.routingRegister.host" rule="required;"
                       valid-msg="地址不能为空">
            </div>
            <div class="field">
                <label>端口</label>
                <input type="text" name="port" placeholder="端口" ng-model="client.routing.registry.routingRegister.port"
                       rule="required;integer[+];" valid-msg="端口错误">
            </div>
            <div class="field">
                <label>连接数</label>
                <input type="text" name="connection" placeholder="最大连接数" ng-model="client.routing.registry.routingRegister.connection"
                       rule="required;integer[+];" valid-msg="连接数错误">
            </div>
            <div class="field">
                <label>超时</label>
                <input type="text" name="timeout" placeholder="超时" ng-model="client.routing.registry.routingRegister.timeout"
                       rule="required;integer[+];" valid-msg="超时错误">
            </div>
            <div class="field right">
                <div class="ui button cancel tiny" ng-click="client.routing.registry.closeDialog()">取消</div>
                <button class="ui button ok green tiny" type="submit">注册</button>
            </div>
        </form>
    </dialog-content>
</dialog>